<!DOCTYPE html>
<html>
    <head>
        <script src="./jquery-3.7.1.min.js"></script>
        <script src="./js/bootstrap.js"></script>
        <link rel="stylesheet" href="./css/bootstrap.css">
        <style type="text/css">
            #controler{
                border: solid 2px;
                border-radius: 5px;
                display: none; 
            }
        </style>
    </head>
    <body class="container-fluid bg-black" style="color: white;">
        <h1 id="title" class="text-center">简约の抽奖系统</h1>
        
        <!-- Controler -->
        
        <div id="controler" class="p-1">
            <h2>Command Line | Control Panel</h2>
            <input id="command" type="text" class="input-group">
            <button id="run" class="btn btn-primary">Run Command</button>
            <button id="reinit" class="btn btn-danger">Re-Initalize</button>
            <button id="put_in_c" class="btn btn-danger">Put In Candidate</button>
            <button id="put_in_r" class="btn btn-danger">Put In Reward</button>
            <button id="put_in_s" class="btn btn-danger">Put In Special</button>
            <script>
                $("#run").click(function(){
                    eval($("#command").val());
                    console.log("Run "+$("#command").val());
                });
                
                $("#put_in_c").click(function(){
                    can.push($("#command").val());
                });
                $("#put_in_r").click(function(){
                    spc.push($("#command").val());
                });
            </script>
        </div>
        <script>
            $("#title").click(function(){
                $("#controler").slideToggle("slow");
            })
        </script>

        <!-- Msg -->
        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 114516;">
            <div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                    <strong class="me-auto">提示</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body" >
                    <p id="msg" class="text-black">(none)</p>
                </div>
            </div>
        </div>
        <script>
            function showMsg(msg) {
                var toast = new bootstrap.Toast(document.getElementById('toast'));
                $("#msg").text(msg);
                toast.show();
            }
        </script>
        <!-- Loader -->
        <script>
            showMsg("Loading...");
            var candi="./candidates.txt";
            var reward="./rewards.txt";
            var special="./special.txt";
            var title="简约の抽奖系统";
            var shouldRemove=true;
            console.log(candi,reward,special);
            /**@type {Array<string>} */
            var can=[];
            /**@type {Array<string>} */
            var rwd=[];
            /**@type {Array<string>}*/
            var spc=[];
            
            function emerg_init(){
                showMsg("Loading...");
                console.log(candi);
                console.log(reward);
                can=window.reader.readFile(candi).split("\n");
                for(i in can) can[i]=can[i].replace("\r","");
                rwd=window.reader.readFile(reward).split("\n");
                for(i in rwd) rwd[i]=rwd[i].replace("\r","");
                spc=window.reader.readFile(special).split("\n");
                for(i in spc) spc[i]=spc[i].replace("\r","");
                console.log(can,rwd,spc);
                showMsg("Candidates and rewards loaded.");
                if(can.length==0 || rwd.length==0){
                    showMsg("警告：奖池为空（但愿这不是个错误）");
                }
                if(spc.length==0){
                    showMsg("提示：没有设定超级大奖");
                }
            }

            $("#reinit").click(emerg_init);

            showMsg("Candidates and rewards loaded.");
            
        </script>
        <style>
            #can{
                border:solid 2px;
                border-radius: 5px;
                height: 80vh;
            }
            #rwd{
                border:solid 2px;
                border-radius: 5px;
                height: 80vh;
            }
            #player{
                object-fit: fill;
                height:100vh;
                width:100vw;
            }
            .topMost{
                z-index: 114519;
            }
            .hideText{
                display: none;
            }
            .leftCenter{
                left:20%;
            /*    transform: translateX(-50%); */
            }
            .topCenter{
                top:50%;
                transform: translateY(-50%);
            }
        </style>
        <style>
            .Txt{
                font-size: 100px;
                height: 80%;
                overflow-wrap: break-word;
            }
            .LBox{
                overflow: hidden;
                background-color: aqua;
                box-shadow: 5px 5px 20px #888;
                clip-path: polygon(
                    0% 0%,
                    100% 0%,
                    90% 100%,
                    0% 100%
                );
            }
            .RBox{
                overflow: hidden;
                background-color: red;
                box-shadow: 5px 5px 20px #888;
                clip-path: polygon(
                    10% 0%,
                    100% 0%,
                    100% 100%,
                    0% 100%
                );
            }
            @keyframes flash{
                0% {font-size: 100px;}
                100% {font-size:120px;}
            }
            .anim-keep{
                animation-duration: 1.5s;
                animation-delay: 0s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }
            .anim-none{
                animation-duration: 1.5s;
                animation-delay: 0s;
                animation-iteration-count: 1;
                animation-fill-mode: none;
            }
            .anim-return{
                animation-duration: 0.75s;
                animation-delay: 0s;
                animation-iteration-count: 2;
                animation-fill-mode:none;
                animation-direction: alternate;
            }
            .anim-stop{
                animation-play-state: paused;
            }
            .anim-Txt{
                animation-name: flash;
            }
        </style>
        <style>
            #start{
                object-fit:contain;
                position:absolute;
                height: 30%;
                top:50%;
                width: 30%;
                z-index: 1145;
                left: 50%;
                transition: 0.5s;
                transform: translate(-50%,-50%);
            }
            #start:hover{
                width: 33%;
                height:33%;
            }
        </style>

        
        <!-- Candidates box -->
        <div class="row">
        <div id="can" class="col text-center ms-1 mb-1 me-1 LBox">
            <h1>获奖者是...</h1><br>
            <p id="candidate" class="text-primary Txt">None</p>
        </div>
        <img src="./start.png" id="start">
        <div id="rwd" class="col text-center me-1 mb-1 RBox">
            <h1>当前奖品...</h1><br>
            <p id="reward" class="text-primary Txt">None</p>    
        </div>    
        </div>
        
        

        <!-- <button id="start" class="btn btn-primary col-12">开始！</button> -->

        <!-- Genshin Player -->

        <div id="genshin" class="text-center topMost" style="position: fixed;top:0px;left: 0px;">
            <style>
                #luckydog{
                    color:red;
                    font-size:30vh;
                    position: fixed;
                    z-index: 114515;
                    top:2vh;
                    overflow: hidden;
                    width: 95%;
                    border-bottom: #292424 solid;
                    max-width: 95%;
                    text-overflow: ellipsis;
                    margin-bottom: 1%;
                    max-height: 40vh;
                    left:50%;
                    transform: translateX(-50%);
                }
                #tp{
                    margin-top: 5px;
                    color:black;
                    font-size: 100px;
                    position: fixed;
                    z-index: 114515;
                    text-overflow: ellipsis;
                    top:42vh;
                    left:50%;
                    width: 95%;
                    max-width: 95%;
                    border:black dashed;
                    padding: 5px;
                    overflow-wrap: break-word;
                    transform: translateX(-50%);
                }
                @keyframes smallIn {
                    from {font-size: 200vh;}
                    to   {font-size:  30vh;}
                }
                @keyframes rotateIn {
                    from {
                        top:200vh;
                        transform: rotate(180deg);
                        font-size: 200vh;
                    }
                    to {
                        top:42vh;
                        transform: rotate(0deg);
                        font-size: 100px;
                    }
                }
                .Animate{
                    animation-name: smallIn;
                    animation-duration: 1000ms;
                    animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
                    animation-delay: 0s;
                    animation-direction: normal;
                    animation-play-state: running;
                    animation-fill-mode: none;
                }
                .Animate2{
                    animation-name: rotateIn;
                    animation-duration: 1000ms;
                    animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
                    animation-delay: 0s;
                    animation-direction: normal;
                    animation-play-state: running;
                    animation-fill-mode: none;
                }
            </style>

            <video id="player" class="hideText topMost" src="./genshin.mp4"></video>
            <p id="luckydog" class="hideText topMost">None</p><br>
            <p id="tp" class="hideText topMost">中了</p>
            <button id="back" class="hideText btn btn-close topMost" style="position: fixed;bottom: 2px;right: 2px;z-index: 114515;"></button>
            <script>
                function showGenshin(who,what){
                    //showMsg("test")
                    $("#luckydog").text(who);
                    $("#tp").text("中了"+what);
                    var media=document.querySelector("#player");
                    media.currentTime=0;
                    $("#player").toggleClass("hideText");
                    setTimeout(function(){
                        $("#back").toggleClass("hideText");
                        $("#luckydog").toggleClass("hideText");
                        $("#luckydog").addClass("Animate");
                        $("#tp").toggleClass("hideText");
                        $("#tp").addClass("Animate2");
                        
                    },7000);
                    media.play();
                }
                function hideGenshin(){
                    $("#luckydog").removeClass("Animate");
                    $("#tp").removeClass("Animate2");
                    $("#luckydog").toggleClass("hideText");
                    $("#tp").toggleClass("hideText");
                    $("#player").toggleClass("hideText");
                    $("#back").toggleClass("hideText");
                }
                $("#back").click(hideGenshin);
            </script>

        </div>

        <script>
            var isWorking=false;
            var currentCandidate="None";
            var currentReward="None";
            var loopHandle=undefined;
            /**@type {Array<string>}*/
            var luckydogs=[];
            /**@type {Array<string>}*/
            var rewardList=[];
            function switchScreen(){
                currentCandidate=can[Math.floor(Math.random() * can.length)];
                currentReward=rwd[Math.floor(Math.random()*rwd.length)];
                $("#candidate").text(currentCandidate);
                $("#reward").text(currentReward);
            }
            function start(){
                if(isWorking){
                    showMsg("错误：正在进行抽奖");
                    return false;
                }
                if(can.length==0 || rwd.length==0){
                    showMsg("错误：奖池为空");
                    return false;
                }
                isWorking=true;
                loopHandle=setInterval(switchScreen,50);
                return true;
            }
            function stop(){
                if(!isWorking){
                    showMsg("错误：没有正在进行的抽奖");
                    return;
                }
                isWorking=false;

                clearInterval(loopHandle);
                luckydogs.push(currentCandidate);
                rewardList.push(currentReward);
                if(shouldRemove){
                    can.splice(can.indexOf(currentCandidate),1);
                    rwd.splice(rwd.indexOf(currentReward),1);    
                }
                if(spc.includes(currentReward)){
                    showGenshin(currentCandidate,currentReward);
                }else showMsg(currentCandidate+" 中了 "+currentReward+". 恭喜！");
            }
            
            $(document).keypress(function(e){
                
                // if(e.keyCode==32){
                //     hideGenshin();
                //     showMsg("show");
                // }
            })
            function toggle(){
                if(!isWorking){
                    var ret=start();
                    if(!ret) return;
                    $("#start").attr("src","./stop.png");
                }else{
                    stop();
                    $("#start").attr("src","./start.png");
                }
            }
            $("#start").click(toggle);
            showMsg("Initalization complete.");
        </script>

        <button id="close" class="btn btn-close-white" style="color: aqua;position: fixed;top: 5px;right: 5px;">关闭</button>
        <script>
            $("#close").click(function(){
                window.close();
            })
        </script>

        <!-- Settings -->
        <div id="settings" class="leftCenter topCenter topMost bg-info border border-1 border-light p-2" style="position: fixed;width: 60%;height: fit-content;border-radius: 5px;">
            <script>
                var isOpen=false;
                function reset_settings(){
                    candi="./candidates.txt";
                    reward="./rewards.txt";
                    special="./special.txt";
                    title="简约の抽奖系统";
                    shouldRemove=true;
                }
                function reload_settings(){
                    /**@type {Array<string>}*/
                    var conf=window.reader.readFile("./settings.conf").split("\n");
                    for(i in conf) conf[i]=conf[i].replace("\r",""),console.log("settings = "+conf[i]);
                    if(conf==undefined || conf.length==0){
                        showMsg("错误：设置读取错误");
                        reset_settings();
                        return false;
                    }
                    title=conf[0],candi=conf[1],reward=conf[2],special=conf[3];
                    shouldRemove=(conf[4].includes("true"));
                    return true;
                }
                function apply_settings(){
                    $("#title").text(title);
                    emerg_init();
                }
                reload_settings();
                apply_settings();
            </script>
            <h1>控制面板</h1>
            
            <label for="tit">标题</label><input id="tit" class="input-group" type="text">
            <label for="people">获奖者(相对路径，下同)</label><input id="people" class="input-group" type="text">
            <label for="rwdinp">奖池</label><input id="rwdinp" class="input-group" type="text">
            <label for="big">大奖</label><input id="big" class="input-group" type="text">
            <button id="rmv" class="btn btn-warning">关闭移除功能</button>
            <button id="output" class="btn btn-warning">输出获奖名单</button>
            <button id="clear" class="btn btn-danger">清空获奖名单</button>
            <br>
            <button id="applyset" class="btn btn-primary">应用(会重新读取)</button>
            <button id="saveset" class="btn btn-primary">保存</button>
            <button id="quitset" class="btn btn-danger">退出</button>
            <script>
                function output(){
                    var opt="";
                    for(i in luckydogs){
                        opt+=luckydogs[i]+" "+rewardList[i]+"\n";
                    }
                    console.log(opt);
                    window.writer.writeFile("./list.txt",opt);
                    showMsg("输出于 ./list.txt 下");
                }
                function clear(){
                    luckydogs.splice(0),rewardList.splice(0);
                    showMsg("已清空");
                }
                function open_settings(){
                    if(isOpen){
                        isOpen=false;
                        $("#settings").fadeOut();
                        return;
                    }
                    isOpen=true;
                    $("#tit").val(title);
                    $("#people").val(candi);
                    $("#rwdinp").val(reward);
                    $("#big").val(special);
                    if(shouldRemove){
                        $("#rmv").text("关闭移除功能");
                    }else{
                        $("#rmv").text("开启移除功能");
                    }
                    $("#settings").fadeIn();
                }
                function switch_rmv(){
                    shouldRemove=!shouldRemove;
                    if(shouldRemove){
                        $("#rmv").text("关闭移除功能");
                    }else{
                        $("#rmv").text("开启移除功能");
                    }
                }
                function save_settings(){
                    title=$("#tit").val();
                    candi=$("#people").val();
                    reward=$("#rwdinp").val();
                    special=$("#big").val();
                    window.writer.writeFile("./settings.conf", `${title}\n${candi}\n${reward}\n${special}\n${shouldRemove}`);
                    showMsg("输出于 settings.conf 下");
                }
                function apply_(){
                    title=$("#tit").val();
                    candi=$("#people").val();
                    reward=$("#rwdinp").val();
                    special=$("#big").val();
                    apply_settings();
                }
                $("#applyset").click(apply_);
                $("#saveset").click(save_settings);
                $("#quitset").click(open_settings);
                $("#rmv").click(switch_rmv);
                $("#clear").click(clear);
                $("#output").click(output);
            </script>

        </div>
        <button class="btn btn-toolbar" style="position: fixed;left: 5px;top: 5px;color: aqua;" id="settings_open">设置</button>
        <script>
            $("#settings").hide();
            $("#settings_open").click(open_settings);
        </script>
    </body>
</html>